<template>
	<view class="homepage">
		<!-- 头部导航栏 -->
		<view class="head_navigation">
			<u-navbar leftText="返回" :safeAreaInsetTop="true" :placeholder="true">
				<view class="u-nav-slot" slot="left">
					<text class="postion_zone">厦门</text>
					<u-icon name="map" size="19" top="1.2" color="black" bold="true"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 顶部标签切换栏 -->
		<view class="top_Change">
			<u-tabs :list="list1" lineColor="#00C589" :activeStyle="{color: '#00C589',}" ></u-tabs>
		</view>
		<!-- 滚动通知区域 -->
		<view>
			<u-notice-bar :text="ScrollText"></u-notice-bar>
		</view>
		<!-- 显示地图区域 -->
		<view class="map_navigation">
			<map id="navMap" @regionchange="updateMap" :markers="initialPoint" enreable-traffic="true" enable-poi="true"
				enable-scroll="true" show-location="true" class="map" :show-location="true" :latitude="latitude"
				:longitude="longitude">
			</map>
		</view>
		<!-- 出发点和终点 -->
		<view class="call_car">
			<view class="start_point">
				<view class="dot"></view>
				<text style="margin-left: 100rpx;">{{addressName}}</text>
			</view>
			<view class="end_point">
				<view class="dot1"></view>
				<input type="text" placeholder="输入您的目的地" class="end_input" disabled="true"
					placeholder-style="color:black">
			</view>
		</view>
		<!-- 开始叫车按钮 -->
		<view class="callBtn">
			<u-button text="开始叫车" color="linear-gradient(to right, #00B7B5, #16AF77)"></u-button>
		</view>
		<!-- 红包优惠卷 -->
		<view class="discount_zone">
			<view class="discount">
				<view>
					<view class="discount_text1">限时抢8元打车费</view>
					<view class="discount_text2">福利驾到</view>
					<view class="discount_text3">
						马上抢
					</view>
				</view>
				<view>

				</view>
			</view>
		</view>
		<!-- 底部法律信息 -->
		<view class="legislation_zone">
			<view class="">
				法律条款和平台规则
			</view>
			<view class="">
				证照信息
			</view>
		</view>
		<!-- 侧边定位栏 -->
		<view class="broadside">
			<img src="../../static/dingwei.png" alt="" srcset="">
		</view>
		<!-- 底部tab切换栏 -->
		<view class="">
			<u-tabbar :value="selected" @change="name => selected = name" :fixed="true" :placeholder="true"
				activeColor="#16AF77" :safeAreaInsetBottom="true">
				<u-tabbar-item text="首页"  icon="home" name="home"></u-tabbar-item>
				<u-tabbar-item text="我的" icon="account" name="account"></u-tabbar-item>
			</u-tabbar>
		</view>
		
	</view>
</template>

<script>
	// import { wxGetAddress } from '../../common/address.js'; //刚刚封装的方法

	import amap from "../../common/amap-wx.130.js";



	export default {

		data() {
			return {
				navMap: '',  // 初始实例化地图对象
				amapPlugin: null, // 插件效果
				gaodeKey: "fc95a02311fe6443c293a6746cc614f5", //  高德地图申请的key
				latitude: '', // 纬度
				longitude: '', // 经度
				addressName: '', // 具体地址的名字		
				initialPoint: [{
					id: 0,
					latitude: '',
					longitude: '',
					iconPath: "../../static/location1.png",
					width: 20,
					height: 20
				}], //  初始点
				selected:"home",  // 当前底部tab显示页面
				list1: [{ name: '快车'}, {name: '出租车'}],   // 头部切换标签栏
				ScrollText:"王帅是骚1",  //  滚动通知区域内容
		
			}
		},
		onLoad() {
			// 高德地图sdk的获取
			this.amapPlugin = new amap.AMapWX({
				key: this.gaodeKey
			});

			this.navMap = uni.createMapContext("navMap", this) // 实例化地图对象

			this.getLocation()

			this.getRegeo()
		},
		methods: {
			// 获取当前位置的经纬度
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.initialPoint[0].latitude = res.latitude
						that.initialPoint[0].longitude = res.longitude
						that.latitude = res.latitude
						that.longitude = res.longitude
						console.log(that.initialPoint);
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			// 高德地图api获取具体位置的地址信息
			getRegeo() {
				let that = this
				this.amapPlugin.getRegeo({
					success: (data) => {
						// console.log(data);
						that.addressName = data[0].name;
						console.log(that.addressName);
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			// 地图视野改变时触发
			updateMap(event) {
				let that = this
				that.navMap.getCenterLocation({
					success: (res) => {
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.initialPoint[0].latitude = res.latitude
						that.initialPoint[0].longitude = res.longitude

					},
					fail: (err) => {
						console.log(err);
					}
				})

			},
		}
	}
</script>

<style>
	
	.u-tabs{
		align-items: center!important;
	
	}
	
	
	.dot {
		position: absolute;
		width: 7px;
		height: 7px;
		border-radius: 100%;
		background: #16AF77;
		top: 40rpx;
		left: 65rpx;
	}

	.dot1 {
		position: absolute;
		width: 7px;
		height: 7px;
		border-radius: 100%;
		background: #FE7D4B;
		top: 155rpx;
		left: 65rpx;
	}

	.homepage {
		background-color: #F2F3F7;
	}



	.u-nav-slot {
		display: flex;
	}

	.postion_zone {
		vertical-align: middle;
		margin-right: 5rpx;
		font-weight: 900;
	}

	.map_navigation {
		width: 95%;
		height: 400rpx;
		border: 1px solid #F2F5FA;
		border-radius: 10px;
		margin: 15px auto;
	}

	.map {
		width: 100%;
		height: 100%;
		border-radius: 20px;
		
	}

	.call_car {
		width: 95%;
		height: 250rpx;
		border: 1px solid #E3E6EE;
		margin: 0px auto;
		position: relative;
		top: -40px;
		background-color: white;
		border-radius: 15px;
		box-shadow: 0 0 15px #E3E6EE;
	}

	.start_point {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		color: #16AF77;
		font-size: 14px;
		font-weight: 900;
	}

	.end_point {
		width: 90%;
		height: 130rpx;
		background-color: #F6F7FB;
		margin: auto;
		border-radius: 10px;
	}

	.end_input {
		position: absolute;
		top: 138rpx;
		left: 100rpx;
		font-size: 20px;
		color: black;
		padding-left: 5px;
		font-weight: 900;
	}

	.Sliding_fast {
		width: 95%;
		/* border: 1px solid red; */
		margin: -15px auto;
	}

	.swiper {
		height: 440rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.discount_zone {
		width: 90%;
		margin: 50px auto;
	}

	.discount {
		width: 100%;
		height: 240rpx;
		background-color: white;
		border-radius: 15px;
		display: flex;
	}

	.discount>view {
		width: 50%;
		height: 100%;

	}

	.discount_text1 {
		margin-top: 15px;
		margin-left: 18px;
		font-weight: 900;
	}

	.discount_text2 {
		padding: 7px;
		margin-left: 10px;
		font-weight: 900;
		font-size: 12px;
		color: #9E9E9E;
	}

	.discount_text3 {
		padding: 3px;
		font-size: 12px;
		font-weight: 900;
		border: 2px solid #E8743E;
		width: 140rpx;
		margin-left: 13px;
		color: #E8743E;
		border-radius: 25px;
		text-align: center;
	}


	.legislation_zone {
		width: 100%;
		height: 200rpx;
		margin: 25px auto;
		text-align: center;
		font-size: 13px;
	}

	.legislation_zone>view {
		margin-top: 5px;
		color: #97989A;
	}
	
	.top_Change{
		background-color: white;
	}
	
	.broadside{
		position: absolute;
		top: 600rpx;
		right: 5px;
		z-index: 100;
		width: 70rpx;
		height: 70rpx;
		background-color: white;
		border-radius: 50%;
	}
	
	.broadside img{
		width: 20px;
		height: 20px;
		display: block;
		margin: auto;
		margin-top: 10rpx;
	}
	
	.callBtn{
		margin: -25px auto;
		width: 90%;
	}
	
</style>
